<template>
  <div>
    <Table
      ref="tableRef"
      :url="URL_PAGINGSHAREPROFIT"
      :columns="data.columns"
      :toolbar="data.toolbar"
      :handles="data.handles"
      :query="data.query"
    ></Table>
    <el-dialog
      v-model="data.dialogVisible"
      v-if="data.dialogVisible"
      title="参与分润场站"
      width="850px"
      class="qc-custom-dialog"
      :before-close="handleClose"
    >
      <Table
        ref="dialogTableRef"
        :url="URL_PAGINGSHAREPROFITSTATION"
        :columns="dialogData.columns"
        :toolbar="dialogData.toolbar"
        :query="dialogData.query"
        :params="{ shareProfitId: data.shareProfitId }"
      ></Table>
    </el-dialog>
  </div>
</template>
  
<script lang="ts" setup name="dividendManagementList">
import Table from '@/components/table/index.vue';
import {
  URL_PAGINGSHAREPROFIT,
  shareProfitDelete,
  URL_PAGINGSHAREPROFITSTATION,
  EXPORT_SHAREPROFITSTATION,
} from '@/service/apis/financial';
import { exportFile } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();
const dialogTableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

const data = reactive({
  dialogVisible: false,
  shareProfitId: '',
  columns: [
    {
      prop: 'name',
      label: '分润方名称',
    },
    {
      prop: 'orgName',
      label: '归属运营商',
    },
    {
      prop: 'contactsName',
      label: '联系人',
    },
    {
      prop: 'contactsTelephone',
      label: '联系方式',
    },
    {
      prop: 'roleName',
      label: '授权管理员',
    },
    {
      prop: 'updateBy',
      label: '修改人',
    },
    {
      prop: 'updateTime',
      label: '修改时间 ',
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'dividendManagementList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'dividendManagementAdd',
        });
      },
    },
  ],
  handles: [
    {
      label: '查看分润场站',
      permission: 'dividendManagementList.see',
      handle: (row: any) => {
        data.shareProfitId = row.id;
        data.dialogVisible = true;
        // dialogBrandRef.value?.show(row);
      },
    },
    {
      label: '修改',
      permission: 'dividendManagementList.edit',
      handle: (row: any) => {
        router.push({
          name: 'dividendManagementEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '删除',
      permission: 'dividendManagementList.delete',
      color: '#FA3939',
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          shareProfitDelete(row.id).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  query: [
    {
      label: '分润方名称',
      prop: 'name',
      comName: 'input',
      props: {
        placeholder: '请输入分润方名称',
      },
    },
    {
      label: '归属运营商',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属运营商',
      },
    },
  ],
});
const dialogData = reactive({
  columns: [
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'orgName',
      label: '归属运营商',
    },
    {
      prop: 'shareType',
      label: '分润模式',
    },
    {
      prop: 'ratio',
      label: '分润金额/比例',
      template: (row: any, index: number) => {
        if (row.shareType == '固定价格') {
          return row.amount ? `${row.amount}元/度` : '--';
        } else if (row.shareType == '固定折扣') {
          if (row.ratio == 0) {
            return `${row.ratio.toString()}%`;
          } else {
            return row.ratio ? `${row.ratio}%` : '--';
          }
        } else {
          return '--';
        }
      },
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'dividendManagementList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_SHAREPROFITSTATION,
          '参与分润场站',
          dialogTableRef.value?.getForm()
        );
      },
    },
  ],
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
  ],
});
const handleClose = (done: () => void) => {
  dialogTableRef.value?.handleReset();
  done();
};
</script>